<template>
  <transition name="slide">
    <div v-if="messageIsShow" :class="['message-container', `message-${type}`]">
      <span class="title" v-text="title"></span>
      <span class="xxx" @click="closeMySelf" v-if="closeIconIsShow">×</span>
      <div v-text="msg"></div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'message3',
  data() {
    return {
      delay: 1000,
      closeIconIsShow: null,
    };
  },
  methods: {
    closeMySelf() {
      this.messageIsShow = false;
    },
  },
  created() {
    this.closeIconIsShow = !this.delay;
  },
  mounted() {
    if (this.delay) {
      this.timer = setTimeout(() => {
        this.messageIsShow = false;
      }, this.delay);
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>

<style scoped lang="scss">
  .message-container{
    width: 330px;
    padding: 14px 26px 14px 13px;
    border-radius: 8px;
    box-sizing: border-box;
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    position: absolute;
    top: 50px;
    right: 5px;
    overflow: hidden;
    display: inline-block;
    .title{
      display: inline-block;
      font-weight: bold;
      line-height: 30px;
      width: 270px;
      font-size: 14px;
    }
    .xxx{
      font-size: 18px;
    }
  }
  .slide-enter,.slide-leave-to{
    transform: translate(340px, 0);
    opacity: 0;
  }
  .slide-enter-active, .slide-leave-active {
    transition: all .3s ease-in-out;
  }
  .slide-enter-to,.slide-leave {
    transform: translate(340, 0);
    opacity: 1;
  }
</style>
